@extends('Admin.layout')
@section('header')
    <link rel="stylesheet" href="https://unpkg.com/codemirror@5.65.14/lib/codemirror.css">
    <link rel="stylesheet" href="https://unpkg.com/codemirror@5.65.14/theme/material.css">
    <link rel="stylesheet" href="https://unpkg.com/codemirror@5.65.14/addon/dialog/dialog.css">
    <script src="https://unpkg.com/codemirror@5.65.14/lib/codemirror.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.14/addon/dialog/dialog.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.14/addon/edit/closebrackets.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.14/addon/search/jump-to-line.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.14/addon/search/searchcursor.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.14/addon/search/search.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.14/mode/sql/sql.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.14/mode/clike/clike.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.14/mode/php/php.js"></script>
@endsection
@section('main')

    <el-card style="margin-bottom: 5px">
        <el-form :inline="true">
            <el-form-item :label-width="120" label="来源数据表:">
                <el-autocomplete value-key="TABLE_NAME" clearable @select="tableSelected"
                                 :fetch-suggestions="tableQuerySearch" v-model="updateData.table" placeholder="表名">
                    <template #default="{ item }">
                        @{{item.TABLE_NAME}} @{{item.TABLE_COMMENT}}
                    </template>
                </el-autocomplete>
            </el-form-item>
            <el-form-item label="插件名:">
                <el-autocomplete clearable :fetch-suggestions="pluginsQuerySearch" @change="pluginsChange"
                                 @select="pluginsSelected" v-model="updateData.plugins">
                    <template #default="{ item }">
                        @{{ item }}
                    </template>
                </el-autocomplete>
            </el-form-item>
            <el-form-item label="子文件夹:">
                <el-autocomplete clearable :fetch-suggestions="dirQuerySearch" @select="dirSelected"
                                 v-model="updateData.dir">
                    <template #default="{ item }">
                        @{{ item }}
                    </template>
                </el-autocomplete>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" @click="check">检测</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">更新</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card>
        <textarea id="editor"></textarea>
    </el-card>

@endsection

@section('footer')
    <script>
        VueInit.data.allTables = [];
        VueInit.data.dirs = [];
        VueInit.data.plugins = {!! json_encode($plugins) !!};
        VueInit.data.updateData = {
            table: '',
            table_comment: '',
            plugins: '',
            dir: '',
            ModelCode: '',
        };
        VueInit.data.height = (window.innerHeight - 150);
        VueInit.data.theme = '';
        VueInit.data.editor = '';


        VueInit.event.addHandler("created:getAllTable", function () {
            axios({
                url: "{{ sc_route([\Plugins\AdminBasic\Http\Admin\Controller\DevAuxController::class, 'getAllTables']) }}",
            }).then(({data}) => {
                if (data.code === 200) {
                    this.allTables = data.data;
                }
            })
        });
        VueInit.event.addHandler("created:CodeMirrorInit", function () {
            this.$nextTick(() => {
                this.editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
                    lineNumbers: true,
                    // mode: 'application/x-httpd-php',
                    mode: 'text/x-php',
                    theme: 'material',
                    lineWrapping: true,
                    autofocus: true,
                    smartIndent: true,
                    matchBrackets: true,
                    autoCloseBrackets: true,
                });
                this.editor.setSize('auto', this.height + 'px');
            });

        });

        VueInit.event.addHandler('created:getDirs', function () {
            axios({
                url: '{{ sc_route([\Plugins\AdminBasic\Http\Admin\Controller\DevAuxController::class, 'getMakeDirs']) }}',
                params: {
                    plugins: this.updateData.plugins
                }
            }).then(({data}) => {
                this.dirs = data.data;
            })
        });


        VueInit.methods.tableQuerySearch = function (query, cb) {
            let res = [];
            for (const i in this.allTables) {
                if (this.allTables[i].TABLE_NAME.includes(query) || this.allTables[i].TABLE_COMMENT.includes(query)) {
                    res.push(this.allTables[i])
                }
            }
            return cb(res);
        }

        VueInit.methods.dirQuerySearch = function (query, cb) {
            let res = [];
            for (const i in this.dirs) {
                if (this.dirs[i].includes(query)) {
                    res.push(this.dirs[i])
                }
            }
            return cb(res);
        }

        VueInit.methods.pluginsQuerySearch = function (search, cb) {
            let res = [];
            if (!search) return cb(this.plugins);
            for (let i = 0; i < this.plugins.length; i++) {
                if (this.plugins[i].name.includes(search)) {
                    res.push(this.plugins[i]);
                }
            }
            return cb(res);
        }

        VueInit.methods.pluginsSelected = function (item) {
            this.updateData.plugins = item;
            this.getDirs();
        }
        VueInit.methods.pluginsChange = function (item) {
            this.updateData.plugins = item;
            this.getDirs();
        }

        VueInit.methods.tableSelected = function (item) {
            this.updateData.table = item.TABLE_NAME;
            this.updateData.table_comment = item.TABLE_COMMENT;
        };

        VueInit.methods.dirSelected = function (item) {
            this.updateData.dir = item;
        }

        VueInit.methods.check = function () {
            if (!this.updateData.table) {
                return this.$message.error("请选择检测的数据表");
            }

            axios({
                url: '{{ sc_route([\Plugins\AdminBasic\Http\Admin\Controller\DevAuxController::class, 'updateFileCheck']) }}',
                params: this.updateData
            }).then(({data}) => {
                if (data.code === 200) {
                    this.editor.setValue(data.data);
                } else {
                    this.$message.error("未检测到更新");
                }
            });
        }

        VueInit.methods.submit = function () {
            if (!this.updateData.table) {
                return this.$message.error("请选择更新的数据表");
            }
            this.updateData.ModelCode = this.editor.getValue();
            if (!this.updateData.ModelCode) {
                return this.$message.error("未检测到跟新的代码");
            }

            axios({
                method: 'post',
                url: '{{ sc_route([\Plugins\AdminBasic\Http\Admin\Controller\DevAuxController::class, 'updateFileExec']) }}',
                data: this.updateData
            }).then(({data}) => {
                if (data.code === 200) {
                    this.$message.success(data.msg);
                    this.editor.setValue("");
                } else {
                    this.$message.error(data.msg);
                }
            });
        }

    </script>
@endsection